<template>
  <div id="app">
    <Header></Header>
    <div id="main">
      <!-- 主体页面的渲染 -->
      <router-view></router-view>
      <!-- 最大商品限制的弹出框 -->
      <prompt v-show="isShowPrompt"></prompt>
    </div>
  </div>
</template>
<script>
import Header from './views/Header'
import Prompt from './components/Prompt/Prompt'
import { mapState } from 'vuex'
export default {
  components:{
    Header,
    Prompt
  },
  computed:{
    ...mapState(['isShowPrompt','cartProductList','addressInfo','id','orderOrAddress'])
  },
  //监测cartProductList数据的变化
  watch:{
    //监测购物车商品
    cartProductList:{
      handler(val){
        this.$local.set('cartData',val);
      },
      deep:true
    },
    //监测地址
    addressInfo:{
      handler(val){
        this.$local.set('addressData',val);
      },
      deep:true
    },
    //监测id
    id:{
      handler(val){
        this.$local.set('addressId',val);
      }
    },
    orderOrAddress:{
      handler(val){
        this.$local.set('orderOrAddress',val);
      }
    }
  }
}
</script>
<style lang="less">
#main{
  margin-top: 190px;
}
</style>
